<template>
    <div class="order-detail">
        <a-modal width="1300px" :visible="visible" title="订单详情" @cancel="closeModal" class="yuan-modal order-detail-modal"
            :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="saveLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData" :rules="rules"
                    :label-col="{ style: { width: '150px' } }" :wrapper-col="{ style: { width: 'calc(100% - 160px)' } }">

                    <div class="form-panel yuan-form-col3">
                        <div class="form-panel-box">
                            <div class="form-title">订单信息</div>
                            <div class="order-panel">
                                <div class="order-log">
                                    <div class="log-list">
                                        <div>下单时间</div>
                                        <div>{{$format(editInfo.placeOrderTime)}}</div>
                                        <i class="iconfont">&#xeb08;</i>
                                    </div>
                                    <div class="log-list" v-if="editInfo.paymentTime">
                                        <div>支付时间</div>
                                        <div>{{$format(editInfo.paymentTime)}}</div>
                                        <i class="iconfont">&#xeb08;</i>
                                    </div>
                                    <div class="log-list" v-if="editInfo.deliveryTime">
                                        <div>发货时间</div>
                                        <div>{{$format(editInfo.deliveryTime)}}</div>
                                        <i class="iconfont">&#xeb08;</i>
                                    </div>
                                    <div class="log-list" v-if="editInfo.receiverTime">
                                        <div>完成时间</div>
                                        <div>{{$format(editInfo.receiverTime)}}</div>
                                        <i class="iconfont">&#xeb08;</i>
                                    </div>
                                    <div class="log-list" v-if="editInfo.cancelTime">
                                        <div>取消时间</div>
                                        <div>{{$format(editInfo.cancelTime)}}</div>
                                        <i class="iconfont">&#xeb08;</i>
                                    </div>
                                </div>
                                <div>
                                    <div>
                                        <span class="order-title">订单编号:</span>
                                        <span class="c-primary">{{editInfo.orderNo}}</span>
                                    </div>
                                    <div>
                                        <span class="order-title">当前订单状态:</span>
                                        <span class="type-info c-success" v-if="editInfo.status===4">订单已完成</span>
                                        <span class="type-info c-warning" v-else-if="editInfo.status===1">等待买家付款</span>
                                        <span class="type-info c-primary" v-else-if="editInfo.status===2">买家已付款，等待卖家发货</span>
                                        <span class="type-info c-primary" v-else-if="editInfo.status===3">卖家已发货</span>
                                        <span class="type-info c-danger" v-else-if="editInfo.status===5">售后中</span>
                                        <span class="type-info c-danger" v-else-if="editInfo.status===6">已取消</span>
                                    </div>
                                    <div v-if="editInfo.refundApplyStatus">
                                        <div>
                                            <span class="order-title">售后原因:</span>
                                            <span class="type-info c-danger">{{editInfo.refundReason}}</span>
                                        </div>
                                        <div>
                                            <span class="order-title">售后图片:</span>
                                            <UploadVue :defImgList="editInfo.refundImages?editInfo.refundImages:[]"
                                                :onlyShow="true" v-if="editInfo.refundImages && editInfo.refundImages.length>0"
                                                style="display:inline-block" />
                                            <span class="type-info" v-else>无</span>

                                        </div>
                                        <div v-if="editInfo.returnTrackingNumber">
                                            <span class="order-title">退货物流:</span>
                                            <span class="type-info c-danger">{{editInfo.returnTrackingNumber}}</span>
                                        </div>

                                        <span class="order-title">售后状态:</span>

                                        <template v-if="editInfo.refundApplyStatus===1">
                                            <span class="type-info c-primary">待审核</span>
                                            <div class="refund-btn-box" v-if="userInfo.type==='ORGAN' && $checkPer(['orderAfterSale'])">
                                                <a-button class="refund-btn" type="danger" :loading="saveLoading"
                                                    @click="clickRefuse">
                                                    驳回退款申请
                                                </a-button>
                                                <a-button class="refund-btn" type="success" :loading="saveLoading"
                                                    @click="clickJoin">
                                                    通过退款申请
                                                </a-button>
                                            </div>

                                        </template>

                                        <span class="type-info c-success"
                                            v-else-if="editInfo.refundApplyStatus===2">审核通过，待退货</span>

                                        <template v-else-if="editInfo.refundApplyStatus===3">
                                            <span class="type-info c-danger">审核拒绝(原因：{{editInfo.refundAuditRemark}})</span>

                                        </template>

                                        <span class="type-info c-success" v-else-if="editInfo.refundApplyStatus===4">待退货</span>

                                        <template v-else-if="editInfo.refundApplyStatus===5">
                                            <span class="type-info c-primary">用户退货中</span>
                                            <div class="refund-btn-box" v-if="userInfo.type==='ORGAN' && $checkPer(['orderAfterSale'])">
                                                <a-button class="refund-btn" type="danger" :loading="saveLoading"
                                                    @click="clickRefuseRefund">
                                                    拒绝退款
                                                </a-button>
                                                <a-button class="refund-btn" type="success" :loading="saveLoading"
                                                    @click="clickAgreenRefund">
                                                    同意退款
                                                </a-button>
                                            </div>

                                        </template>

                                        <span class="type-info c-success" v-else-if="editInfo.refundApplyStatus===6">退款完成</span>
                                        <span class="type-info c-danger" v-else-if="editInfo.refundApplyStatus===7">
                                            退款失败(原因：{{editInfo.refundRejectReason}})
                                        </span>
                                    </div>
                                    <div class="order-tips">
                                        <div>交易成功，如果买家提出售后要求，请积极与买家协商，做好售后服务。 </div>

                                        <div>如果买家提前确认收货，包裹还未全部送达，记得跟踪物流信息，给买家一个好的购物体验。 </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-panel-box" style="margin-top:20px">
                            <div class="form-title">买家信息</div>
                            <div class="order-panel">
                                <div>
                                    <span class="order-title">用户昵称:</span>
                                    <span>{{editInfo.nickName}}</span>
                                </div>
                                <div>
                                    <span class="order-title">收货地址:</span>
                                    <span>
                                        {{editInfo.userName}} {{editInfo.phone}} {{editInfo.address}}
                                        <!-- <a-button type="primary" @click="editAddr">修改地址</a-button> -->
                                    </span>
                                </div>

                            </div>
                        </div>
                        <div class="form-panel-box" style="margin-top:20px">
                            <div class="form-title">物流信息</div>
                            <div class="order-panel">
                                <div v-if="editInfo.logisticsName">
                                    <span class="order-title">物流公司名称:</span>
                                    <span>{{editInfo.logisticsName}}</span>

                                    <span class="order-title" style="margin-left:150px">运单号:</span>
                                    <span>{{editInfo.logisticsId}}</span>

                                </div>
                                <div v-else>
                                    暂未发货
                                </div>
                                <!-- <div>
                                    <span class="order-title">物流状态:</span>
                                    <span>已揽收</span>

                                    <span class="order-title" style="margin-left:150px">发货时间:</span>
                                    <span>2025/05/12 23:02:01</span>
                                </div>
                                <div>
                                    <div class="order-tips">
                                        <div>2016-09-13 17:49:00 到达【长沙】</div>
                                        <div>2016-09-13 20:45:08 离开【长沙邮区中心局邮处理中心】，下一站【吉首中心】 </div>
                                    </div>
                                </div> -->

                            </div>
                        </div>
                        <div class="form-panel-box" style="margin-top:20px">
                            <div class="form-title">商品信息</div>
                            <div class="order-panel">
                                <div class="goods-table">
                                    <div class="table-row table-title ">
                                        <div class="table-col">商品</div>
                                        <div class="table-col">规格</div>
                                        <div class="table-col">单价</div>
                                        <div class="table-col">数量</div>
                                        <div class="table-col">总价</div>
                                    </div>
                                    <div class="table-row" v-for="(item,idx) in editInfo.spuInfoS" :key="'spuInfoS_'+idx">
                                        <div class="table-col">{{item.goodsName}}</div>
                                        <div class="table-col">{{item.specificationName}}</div>
                                        <div class="table-col">{{$toYuan(item.price)}}</div>
                                        <div class="table-col">x{{item.quantity}}</div>
                                        <div class="table-col">{{$toYuan(item.price*item.quantity)}}</div>
                                    </div>
                                </div>
                                <div class="order-total">
                                    <div>
                                        <span class="order-title">订单商品金额：</span>
                                        <span>{{$toYuan(totalPrice)}}元</span>
                                    </div>
                                    <div>
                                        <span class="order-title">订单总配送费：</span>
                                        <span class="c-success">+{{$toYuan(editInfo.freightPrice)}}元</span>
                                    </div>
                                    <div>
                                        <span class="order-title">订单优惠金额：</span>
                                        <span class="c-danger">-{{$toYuan(editInfo.discountAmount)}}元</span>
                                    </div>
                                    <div>
                                        <span class="order-title">实收款：</span>
                                        <span class="c-danger"
                                            style="font-size:20px;font-weight:bold">{{$toYuan(editInfo.price)}}元</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a-form-model>
            </a-spin>
            <template slot="footer">
                <template v-if="isShow">
                    <a-button @click="closeModal">
                        关闭
                    </a-button>
                </template>
                <template v-else>
                    <a-button @click="modalOk" type="primary" :loading="saveLoading">
                        确认保存
                    </a-button>
                    <a-button @click="closeModal">
                        取消
                    </a-button>
                </template>

            </template>
        </a-modal>

        <!-- <a-modal width="600px" title="修改地址" :visible="addrVisible" @ok="brokerOk" @cancel="addrCancel" okText="确定"
            cancelText="取消">
            <a-spin tip="Loading..." :spinning="addrLoading">
                <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '100px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">

                        <a-form-model-item class="yuan-form-row" label="联系人">
                            <a-input class="yuan-form-input" v-model="addrData.gainConversionMoney"
                                placeholder="请输入联系人"></a-input>
                        </a-form-model-item>
                        <a-form-model-item class="yuan-form-row" label="电话">
                            <a-input class="yuan-form-input" v-model="addrData.gainConversionMoney"
                                placeholder="请输入电话"></a-input>
                        </a-form-model-item>
                        <a-form-model-item class="yuan-form-row" label="新地址">
                            <a-input class="yuan-form-input" v-model="addrData.gainConversionMoney"
                                placeholder="请输入地址"></a-input>
                        </a-form-model-item>
                    </div>
                </a-form-model>
            </a-spin>
        </a-modal> -->

        <a-modal width="600px" title="拒绝原因" :visible="refuseVisible" @ok="refuseOk" @cancel="()=>refuseVisible=false" okText="确定"
            cancelText="取消">
            <a-spin tip="Loading..." :spinning="saveLoading">
                <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '100px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">

                        <a-form-model-item label="拒绝原因：">
                            <a-input v-model="rejectCause" type="textarea" style="width: 500px;" :rows="5" placeholder="请输入拒绝原因"
                                :maxLength="500" />
                        </a-form-model-item>
                    </div>
                </a-form-model>
            </a-spin>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import UploadVue from "@/components/upload.vue";
import api from "@/api/api";
import shopMallApi from "@/api/shopMallApi";
import { getStorageUserInfo } from "@/utils";
@Component({
    name: "tpl",
    components: { UploadVue },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: false }) isShow!: boolean;
    @Prop({ default: "" }) editInfo!: any;

    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            let total = 0;
            this.editInfo.spuInfoS.forEach((item) => {
                total += item.price * item.quantity;
            });
            this.totalPrice = total;
        }
    }
    totalPrice = 0;
    categoryData = [{ value: "001", label: "食品", children: [{ value: "0011", label: "快餐" }] }];
    saveLoading = false;
    formData: any = {};
    rules = {};
    userInfo={}
    async mounted() {
        this.userInfo = getStorageUserInfo();
    }

    closeModal() {
        this.$emit("closeModal");
    }

    async modalOk() {
        if (this.formData.pictures.length === 0) {
            this.$message.error("请上传封面图");
            return;
        }
        (this.$refs.form as any).validate(async (valid: boolean) => {
            if (!valid) {
                this.$message.error("必填信息不完整，请检查后重试");
                return;
            }
            this.saveLoading = true;
            try {
                // const res = await api.addBanner(this.formData);
                // this.$message.success("保存成功");
                // this.closeModal();
                // this.$emit("resetList");
            } finally {
                this.saveLoading = false;
            }
        });
    }

    addrVisible = false;
    addrLoading = false;
    addrData: any = {};
    editAddr() {
        this.addrVisible = true;
    }
    addrCancel() {
        this.addrVisible = false;
    }

    rejectCause = "";
    refuseVisible = false;
    refuseType = 1;
    clickRefuse() {
        this.refuseType = 1;
        this.rejectCause = "";
        this.refuseVisible = true;
    }
    async refuseOk() {
        this.saveLoading = true;
        try {
            if (this.refuseType === 1) {
                // 如果是拒绝申请
                await shopMallApi.auditRefundApplication({
                    orderId: this.editInfo.orderId,
                    auditRemark: this.rejectCause,
                    auditResult: 3,
                });
            } else {
                // 拒绝退款
                await shopMallApi.rejectRefund({
                    orderId: this.editInfo.orderId,
                    rejectReason: this.rejectCause,
                });
            }
            this.refuseVisible = false;
            this.$message.success("拒绝成功");

            this.closeModal();
            this.$emit("resetList");
        } finally {
            this.saveLoading = false;
        }
    }
    clickJoin() {
        this.$confirm({
            title: "确定要通过吗？",
            okText: "确定",
            cancelText: "取消",
            onOk: async () => {
                this.saveLoading = true;
                const res = await shopMallApi.auditRefundApplication({
                    orderId: this.editInfo.orderId,
                    auditRemark: "",
                    auditResult: 2,
                });
                this.saveLoading = false;
                this.$message.success("审核成功");
                this.closeModal();
                this.$emit("resetList");
            },
            onCancel: () => {
                console.log("Cancel");
            },
        });
    }

    clickRefuseRefund() {
        this.refuseType = 2;
        this.rejectCause = "";
        this.refuseVisible = true;
    }
    clickAgreenRefund() {
        this.$confirm({
            title: "确定要退款吗？请确定您已收到客户退回的货物。",
            okText: "确定",
            cancelText: "取消",
            onOk: async () => {
                this.saveLoading = true;
                const res = await shopMallApi.confirmReceiveAndRefund({
                    orderId: this.editInfo.orderId,
                    confirmRemark: "",
                });
                this.saveLoading = false;
                this.$message.success("退款成功");
                this.closeModal();
                this.$emit("resetList");
            },
            onCancel: () => {
                console.log("Cancel");
            },
        });
    }
}
</script>
<style lang="scss">
.order-detail-modal {
    .order-log {
        display: flex;
        align-items: center;
        padding: 10px;
    }
    .log-list {
        text-align: center;
        position: relative;
        margin-right: 100px;
        .iconfont {
            position: absolute;
            right: -65px;
            top: 10px;
            font-size: 20px;
        }
    }
    .log-list:last-child {
        margin-right: 0;
        .iconfont {
            display: none;
        }
    }
    .order-panel {
        padding: 10px 0;
    }
    .order-title {
        color: #333;
        margin-right: 5px;
    }
    .order-tips {
        color: #999;
        font-size: 12px;
        margin-top: 10px;
    }

    .table-title {
        color: #333;
        font-weight: bold;
    }
    .table-row {
        display: flex;
    }
    .table-col {
        width: 150px;
        padding: 5px;
        text-align: center;
    }

    .order-total {
        text-align: right;
        border-top: solid 1px #eee;
        margin-top: 10px;
        padding: 15px;
    }
    .refund-btn-box {
        padding-top: 15px;
    }
    .refund-btn {
        margin-right: 20px;
    }
}
</style>
